<template>
	<view class="box">
		<view class="card" v-for="(item,index) in coupons" :key="index" @click.stop="chooseOut(item,index)">
			<view class="left">
				<view class="status x-c pa" v-if="!item.shop_id">通用</view>
				<view class="status x-c pa" v-if="item.shop_id">商家</view>
				<image src="/static/image/money.png"></image>
				<view class="text">
					<view class="name one-n">{{item.name}}</view>
					<view class="date pr">有效期至{{item.use_end_time}}</view>
					<view class="type pr">使用规则</view>
				</view>
			</view>
			<view class="right pr">
				<view class="score" :class="{'showUse': item.status === '已使用','showScore': item.status === '已过期'}">
					<span class="num">{{item.points}}</span>
					<span class="name1">积分</span>
				</view>
				<!-- 选择优惠券 -->
				<view class="choseIcon pa">
					<view class="circle" :class="{'change_circle' : index==act}"></view>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="order_bottom">
			<view class="x-c"><span class="sumScore1">可减：</span><span class="sumScore">{{total || 0}}<span
						class="sumScore2">积分</span></span></view>
			<view class="order_bottom_btn">
				<view class="swap" @tap.stop="submit">
					<view class="swap_text">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			// 获取vuex 数据
			...mapState({
				cart_group: state => state.order.order,                // 订单列表
				orderInit: state => state.order.orderInit,			   // 初始化订单信息
				coupons: state => state.order.canUser,				   // 卡卷信息
				allEqual: state => state.order.allEqual, 			   // 判断是否全等
				maxPoint: state => state.order.maxPoint,		       // 最大积分
				selectAct: state => state.order.selectAct,             // 优惠券选择下标
				sum: state => state.cart.sum,                          // 总积分
				sumInit: state => state.order.sumInit,                 // 固定总积分
				couponsPoint: state => state.order.couponsPoint,       // 优惠券积分
				pointList: state => state.order.pointList,             // 最大积分列表
				buttonType: state => state.order.type,                 // 订单状态按钮
			}),
		},
		data() {
			return {
				total: 0,          // 总积分
				points: 0,         // 卡卷积分
				act: -1,           // 卡卷选择下标
				num: 0,			   // 总积分
				detail: null,	   // 卡卷信息
				indexList: [], 	   // 下标列表
			};
		},
		mounted() {
			// 判断是否选择优惠券，若无则清空卡卷信息
			if(this.act != -1) {
				this.act = this.selectAct
				this.total = this.couponsPoint
				this.num = this.sumInit
			} else {
					this.act = -1;
					this.detail = null;
					// 跳转优惠券追加一个状态
					this.$store.dispatch('order/get_isUseFit', false)
					// 提交优惠券信息
					this.$store.dispatch('order/get_credit', null)
					// 提交优惠券积分
					this.$store.dispatch('order/get_couponsPoint', 0)
					// 提交优惠券信息
					this.$store.dispatch('order/get_coupons', null)
					// 提交优惠券下标
					this.$store.dispatch('order/get_selectAct', -1)
			}
		},
		onShow() {
			this.num = this.sumInit
		},
		onUnload() {
			this.$store.dispatch('order/get_selectAct', -1)
		},
		methods: {
			// 选择优惠券
			chooseOut(e, index) {
				if (this.act != index) {
					this.act = index
					this.total = this.coupons[index].points
					this.detail = e
				} else {
					this.act = -1;
					this.detail = null;
					// 跳转优惠券追加一个状态
					this.$store.dispatch('order/get_isUseFit', false)
					// 提交优惠券信息
					this.$store.dispatch('order/get_credit', null)
					// 提交优惠券积分
					this.$store.dispatch('order/get_couponsPoint', 0)
					// 提交优惠券信息
					this.$store.dispatch('order/get_coupons', null)
					// 提交优惠券下标
					this.$store.dispatch('order/get_selectAct', -1)
				}
			},
			// 提交
			submit() {
				if(this.detail == null) {
					this.$tools.toast('请选择优惠券') 
					return;
				}
				// 跳转优惠券追加一个状态
				this.$store.dispatch('order/get_isUseFit', true)
				// 提交优惠券信息
				this.$store.dispatch('order/get_credit', this.detail)
				// 提交优惠券积分
				this.$store.dispatch('order/get_couponsPoint', this.total)
				// 提交优惠券信息
				this.$store.dispatch('order/get_coupons', this.detail)
				// 提交优惠券下标
				this.$store.dispatch('order/get_selectAct', this.act)
				this.$Router.push({
					path: '/pages/order/index',
				})
			},
			chageIcon(val) {
				if (val.status == '已使用') {
					this.$tools.toast('优惠券处于已使用')
				}
				if (val.status == '已过期') {
					this.$tools.toast('优惠券处于已过期')
				}
			},
		}
	};
</script>

<style scoped lang="scss">
	.circle {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: #999 2rpx solid;
		box-sizing: border-box;
	}

	.change_circle {
		background: url(../../../static/image/chose.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 30rpx 30rpx;
		border: none !important;
	}

	.box {
		padding: 16rpx 24rpx;

		.showDate {
			color: #999;
		}

		.showUse1 {
			background: linear-gradient(90deg, #bfbfbf 8%, #dddddd 96%) !important;
		}

		.showUse {
			opacity: 0.4;
		}

		.showScore {
			color: #999 !important;
		}

		.card {
			margin-bottom: 16rpx;
			background: #fff;
			border-radius: 16rpx;
			padding: 22rpx 20rpx 20rpx;
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;

				.status {
					width: 41px;
					height: 18px;
					background: linear-gradient(90deg, #ff977b, #ff504c);
					border-radius: 6px 0px 14px 0px;
					font-size: 24rpx;
					color: #fff;
				}

				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 12rpx;
				}

				.text {
					padding: 0 0 0 12rpx;

					.name {
						width: 288rpx;
						font-weight: 700;
					}

					.date {
						font-size: 24rpx;
						padding: 20rpx 0 34rpx 0;

						&::after {
							content: '';
							position: absolute;
							left: 0;
							top: 60rpx;
							width: 498rpx;
							border: 1rpx dashed #dcdcdc;
						}
					}

					.type {
						color: #999;
						font-size: 22rpx;

						//图片
						&:after {
							content: "";
							position: absolute;
							left: 60rpx;
							top: -9rpx;
							background-image: url("/static/image/arrow_right.png");
							background-size: cover;
							width: 50rpx;
							height: 50rpx;
						}
					}
				}
			}

			.right {
				.choseIcon {
					top: 0;
					right: 0;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.score {
					padding: 40rpx 0 0 0;
					color: #e93323;
					.num {
						font-weight: 600;
						font-size: 42rpx;
					}
				}

				.btn {
					width: 132rpx;
					height: 42rpx;
					margin-top: 60rpx;
					margin-left: 80rpx;
					background: linear-gradient(90deg, #ff2d1b 8%, #ff977b 96%);
					border-radius: 22rpx;
					color: #fff;
					font-size: 22rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}


		}
	}

	.order_bottom {
		// display:inline;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		z-index: 99;

		.order_bottom_btn {
			display: flex;
			justify-content: space-between;
		}

		.checkedall {
			background-image: url(/static/image/arrow_right.png);
		}

		.order_btn {
			padding: 28rpx 0 28rpx 28rpx !important;
		}

		image {
			height: 50rpx;
			width: 50rpx;
			padding: 28rpx 0 28rpx 28rpx;
		}

		.sumScore {
			font-size: 36rpx;
			color: #FF5445;
			font-weight: 550;
			padding: 30rpx 0 30rpx 0;
			align-items: center;
		}

		.sumScore1 {
			font-size: 28rpx;
			color: #FF5445;
			padding: 30rpx 0 30rpx 24rpx;
			align-items: center;
		}

		.sumScore2 {
			font-size: 28rpx;
			color: #FF5445;
			padding: 30rpx 0 30rpx 0;
			font-weight: 400;
			align-items: center;
		}

		.order_bottom_right {}

		.order_cart {
			background-image: linear-gradient(to right, #FFD260, #FFA84C);
			width: 246rpx;

			.swap_text {
				font-size: 28rpx;
				padding: 34rpx 52rpx 34rpx 54rpx;
				color: #FFFFFF;
			}
		}

		.swap {
			background: linear-gradient(to right, #FF2D1B, #FF977B);
			width: 354rpx;
			display: flex;
			justify-content: center;

			.swap_text {
				font-size: 28rpx;
				padding: 34rpx 60rpx 34rpx 74rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
